<template style="zoom: 1">

  <div class="common-layout">
    <el-container style="background-image:url(https://sgs-gwk8s.oss-cn-hangzhou.aliyuncs.com/static/pc/dist/img/bg34.png);background-repeat: no-repeat ">
      <el-header style=" position: relative;left:300px;" >
        <el-row :gutter="20">
          <el-col :span="6">
            <img src="logo.png" style="width: 200px">
            <span class="b1" style=" font-size:110%; position: absolute;top:20px; left:425px">
              <b style="margin: 15px">官网首页</b>
              <b style="margin: 15px">游戏资讯</b>
              <b style="margin: 15px">内容中心</b>
              <b style="margin: 15px">精彩活动</b>
              <b style="margin: 15px">游戏介绍</b>
              <b style="margin: 15px">下载专区</b>
              <b style="margin: 15px">玩家互动</b>
              <b style="margin: 15px">家长监护</b>
            <div class="p1" style="position: absolute;top:20px; left:120px">
              <p>综合咨询</p>
              <p>游戏资讯</p>
              <p>活动公告</p>
              <p>游戏公告</p>
            </div>
            <div class="p1" style="position: absolute;top:20px; left:220px">
              <p>武将评测</p>
              <p>精彩对局</p>
              <p>三国历史</p>
              <p>蜀中篇</p>
            </div>
            <span class="p1" style="position: absolute;top:20px; left:320px">
              <p>校园行</p>
              <p>乐游服务</p>
            </span>
            <span class="p1" style="position: absolute;top:20px; left:420px">
              <p>活动中心</p>
              <p>游戏攻略</p>
              <p>非遗传承</p>
            </span>
            <span class="p1" style="position: absolute;top:20px; left:520px">
              <p>微端下载</p>
              <p>iOS下载</p>
              <p>安卓下载</p>
            </span>
            <span class="p1" style="position: absolute;top:20px; left:620px">
              <p>客服中心</p>
              <p>官方微博</p>
              <p>OL社区</p>
              <p>十周年社区</p>
            </span>

            <span class="p1" style="position: absolute;top:20px; left:720px">
              <p>家长监控</p>
              <p>实名认证</p>
              <p>防沉迷</p>
              <p>账户注销</p>
            </span>
            </span>
          </el-col>
        </el-row>
      </el-header>


      <el-main style="position: relative;width: 2500px;top:120px">
        <div class="contain" style="width:1200px;height:1000px; margin: 0 auto ;position: absolute;top:200px ;left:275px " >
          <el-row :gutter="20">
            <el-col :span="4">
              <img class="myGif" src="begin.gif" style="width: 100%;margin-top: 0">
              <div class="start" style="margin: 0">
                <div style="width: 100%;margin-top:  -5px">
                  <el-menu>
                    <el-menu-item>
                      <el-icon  class="x3" size="20" style="color:#B2A191;">
                        <User/>
                      </el-icon>
                      <b><span  style="font-size: 20px;font-family:楷体">账号注册</span></b>
                    </el-menu-item>
                    <br>
                    <el-menu-item>
                      <el-icon size="20"  class="x4" style="color:#B2A191;">
                        <Compass/>
                      </el-icon>
                      <b><span class="text" style="font-size: 20px;font-family:楷体">新手引导</span></b>
                    </el-menu-item>
                  </el-menu>
                </div>
              </div>
            </el-col>
            <el-col :span="14">
              <el-carousel height="279px" trigger="click">
                <el-carousel-item>
                  <img src="p1.png" style="width: 100%;height: 100%">
                </el-carousel-item>
                <el-carousel-item>
                  <img src="p2.png" style="width: 100%;height: 100%">
                </el-carousel-item>
                <el-carousel-item>
                  <img src="p3.png" style="width: 100%;height: 100%">
                </el-carousel-item>
                <el-carousel-item>
                  <img src="p4.png" style="width: 100%;height: 100%">
                </el-carousel-item>
                <el-carousel-item>
                  <img src="p5.jpeg" style="width: 100%;height: 100%">
                </el-carousel-item>
              </el-carousel>
              <p style="position: absolute;top: 235px;left:769px;font-size: 15px;background-color: rgba(0,0,0,0.8);color: white;padding:5px 38px" >勇无止尽</p>
              <p style="position: absolute;top: 235px;left:632px;font-size: 15px;background-color: rgba(0,0,0,0.8);color: white;padding:5px 39px" >中国银行</p>
              <p style="position: absolute;top: 235px;left:494px;font-size: 15px;background-color: rgba(0,0,0,0.8);color: white;padding:5px 39px" >新将吴刚</p>
              <p style="position: absolute;top: 235px;left:354px;font-size: 15px;background-color: rgba(0,0,0,0.8);color: white;padding:5px 41px" >新将上线</p>
              <p style="position: absolute;top: 235px;left:214px;font-size: 15px;background-color: rgba(0,0,0,0.8);color: white;padding:5px 40px" >大雪暖冬</p>
            </el-col>
            <el-col :span="6">
              <el-row style="height: 50%;">
                <img id="x1" src="p7.png" style="width: 100%;">
                <el-icon id="oval1" style="margin-top: -48px;margin-left: 32px"></el-icon>
              </el-row>
              <el-row style="height: 50%">
                <img id="x2" src="p6.png" style="width: 100%;">
                <el-icon id="oval2" style="margin-top: -48px;margin-left: 32px"></el-icon>
              </el-row>
            </el-col>
          </el-row>
        </div>

        <el-row :gutter="10" style="width: 1200px;height:330px;margin: auto;position: absolute; top:510px ;left: 275px" >
          <el-col :span="4">
            <el-card :body-style="{padding: 0}">
              <div style="height: 220px">
                <img src="https://www.sanguosha.com/static/pc/dist/img/sgs.jpg" style="width: 100%">
              </div>
              <div style="height: 86px;text-align: center;background-color: #333;color: salmon;padding: 24px 0 0">
                <el-icon style="margin: 0 auto">
                  <Download/>
                </el-icon>
                <div style="font-family: 楷体,serif;font-weight: bold;margin: 0 auto">极速微端下载</div>
                <div style="font-size: 1px">D O W N L O A D</div>
              </div>
            </el-card>
          </el-col>
          <el-col :span="11">
            <el-card>
              <div style="background-color: white;color: #444;font-size: 14px">
                <el-container>
                  <el-header style="padding: 0;height: 50px">
                    <div style="padding:6px 0 0">
                      <el-row>
                        <el-col :span="2.8">
                          <div style="font-family: 楷体,serif;font-weight: bold;font-size: 16px">游戏资讯</div>
                        </el-col>
                        <el-col :span="20" style="padding-top: 4px">
                          <div style="font-size: 12px">NEWS</div>
                        </el-col>
                        <el-col :span="1.2">
                          <el-icon><CirclePlus/></el-icon>
                        </el-col>
                      </el-row>
                      <hr style="margin-top: 20px">
                    </div>
                  </el-header>

                  <el-header style="padding: 0;height: 50px">
                    <el-menu style="height: 50px" active-text-color="#A69280" text-color="#444" :ellipsis="false"
                             mode="horizontal">
                      <el-menu-item style="padding: 0 48px" index="1">综合</el-menu-item>
                      <el-divider direction="vertical" style="margin:15px 0"/>
                      <el-menu-item style="padding: 0 48px" index="2">资讯</el-menu-item>
                      <el-divider direction="vertical" style="margin:15px 0"/>
                      <el-menu-item style="padding: 0 48px" index="3">活动</el-menu-item>
                      <el-divider direction="vertical" style="margin:15px 0"/>
                      <el-menu-item style="padding: 0 48px" index="4">公告</el-menu-item>
                    </el-menu>
                  </el-header>
                  <el-footer style="padding: 0;height:190px">
                    <div style="height: 20px;text-align: center;padding: 10px 0">
                      <el-row>
                        <el-col :span="4">
                          <div style="height:20px;background-color: red;color:white;padding-top: 5px">TOP</div>
                        </el-col>
                        <el-col :span="20">
                          <div style="padding-top: 5px">
                            <el-link :underline="false" style="font-weight: bold">[OL]12.9-12.15 占星返场霍俊、登城鏖战*霍俊 擎弓寻*...</el-link>
                          </div>
                        </el-col>
                      </el-row>
                    </div>
                    <div style="margin: 0">
                      <div style="margin: 5px 0">
                        <el-link :underline="false">
                          <el-row style="width: 488px">
                            <el-col :span="22">
                              <div>[十周年][活动]12.9-12.15 周年庆预热 星曹仁传说 乐周妃史诗 登录领...</div>
                            </el-col>
                            <div>12-08</div>
                          </el-row>
                        </el-link>
                      </div>
                      <div style="margin: 5px 0">
                        <el-link :underline="false">
                          <el-row style="width: 488px">
                            <el-col :span="22">
                              <div>[OL][活动] 12.9-12.15 占星返场霍峻、登城鏖战*霍峻 擎弓寻雠*曹性...</div>
                            </el-col>
                            <div>12-08</div>
                          </el-row>
                        </el-link>
                      </div>
                      <div style="margin: 5px 0">
                        <el-link :underline="false">
                          <el-row style="width: 488px">
                            <el-col :span="22">
                              <div>[OL][资讯]王者之战大师赛成都站终极预告来袭，瓜分万元奖金！</div>
                            </el-col>
                            <div>12-07</div>
                          </el-row>
                        </el-link>
                      </div>
                      <div style="margin: 5px 0">
                        <el-link :underline="false">
                          <el-row style="width: 488px">
                            <el-col :span="22">
                              <div>[十周年][公告]12月7日《三国杀十周年》版本更新公告</div>
                            </el-col>
                            <div>12-06</div>
                          </el-row>
                        </el-link>
                      </div>
                      <div style="margin: 5px 0">
                        <el-link :underline="false">
                          <el-row style="width: 488px">
                            <el-col :span="22">
                              <div>[十周年][资讯]【SCL简报】第二赛段第十二周，十周年一见如梦与精英...</div>
                            </el-col>
                            <div>12-06</div>
                          </el-row>
                        </el-link>
                      </div>
                      <div style="margin: 5px 0">
                        <el-link :underline="false">
                          <el-row style="width: 488px">
                            <el-col :span="22">
                              <div>[OL][公告]12月6日《三国杀OL》临时停服维护公告</div>
                            </el-col>
                            <div>12-05</div>
                          </el-row>
                        </el-link>
                      </div>
                    </div>
                  </el-footer>
                </el-container>
              </div>
            </el-card>
          </el-col>
          <el-col :span="3">
            <el-card :body-style="{padding:0}">
              <img src="https://sgs-gwk8s.oss-cn-hangzhou.aliyuncs.com/uploads/1122331.jpg"
                   style="width: 138px;height: 326px">
            </el-card>
          </el-col>
          <el-col :span="6">
            <el-card :body-style="{padding:0}">

              <el-carousel height="330px" direction="vertical" :autoplay="false">
                <el-carousel-item>
                  <img src="https://sgs-gwk8s.oss-cn-hangzhou.aliyuncs.com/static/pc/dist/img/ident1.jpg">
                </el-carousel-item>
                <el-carousel-item>
                  <img src="https://sgs-gwk8s.oss-cn-hangzhou.aliyuncs.com/static/pc/dist/img/ident3.jpg">
                </el-carousel-item>
                <el-carousel-item>
                  <img src="https://sgs-gwk8s.oss-cn-hangzhou.aliyuncs.com/static/pc/dist/img/ident2.jpg">
                </el-carousel-item>
                <el-carousel-item>
                  <img src="https://sgs-gwk8s.oss-cn-hangzhou.aliyuncs.com/static/pc/dist/img/ident4.jpg">
                </el-carousel-item>
              </el-carousel>
            </el-card>
          </el-col>
        </el-row>

        <div style="width: 1200px;margin: 0 auto;margin-top: 845px;margin-right: 1000px">
          <el-row>
            <el-col :span="4">
              <div style="width: 204px; margin: 0 auto; background-color: rgb(50, 50, 50); height: 305px; text-align: left; position: absolute;">
                <el-row >
                  <el-col :span="12">
                    <div  @mouseover="startFloating1" @mouseout="stopFloating1" style="border: 1px solid #4a4a4a;
              width: 100px;
              height: 100px;  ">
                      <div  alt="Floating Image"
                            class="floating-image1"
                            :class="{ 'floating': isFloating1 }"
                            style="background-image: url(/imgs/1.png);
                      width: 75px;
                      height: 75px;
              background-position: -314px -449px;
              background-size: 800px 800px;">
                      </div>
                      <a style="display: block;
                 padding-top: 1px;
                 margin-left: 17px;
                 background-position: -314px -449px;
                 background-size: 80px 80px;">
                        <div style="background-image: url(/imgs/1.png);
                              background-position: -403px -399px;
                              background-size: 570px 570px;
                              width: 60px;
                              height: 25px;">
                        </div>
                      </a>
                    </div>
                  </el-col>
                  <el-col :span="12">
                    <div  @mouseover="startFloating2" @mouseout="stopFloating2" style="border: 1px solid #4a4a4a;
              width: 100px;
              height: 100px;  ">
                      <div  alt="Floating Image"
                            class="floating-image2"
                            :class="{ 'floating': isFloating2 }"
                            style="background-image: url(/imgs/1.png);
                      width: 75px;
                      height: 75px;
              background-position: 0px -570px;
              background-size: 800px 800px;">
                      </div>
                      <a style="display: block;
                 padding-top: 1px;
                 margin-left: 17px;
                 background-position: -314px -449px;
                 background-size: 80px 80px;">
                        <div style="background-image: url(/imgs/1.png);
                              background-position:  -350px -545px;
                              background-size: 570px 570px;
                              width: 60px;
                              height: 25px;">
                        </div>
                      </a>
                    </div>
                  </el-col>
                  <el-col :span="12">
                    <div  @mouseover="startFloating3" @mouseout="stopFloating3" style="border: 1px solid #4a4a4a;
              width: 100px;
              height: 100px;  ">
                      <div  alt="Floating Image"
                            class="floating-image3"
                            :class="{ 'floating': isFloating3 }"
                            style="background-image: url(/imgs/1.png);
                      width: 75px;
                      height: 75px;
              background-position: -529px -450px;
              background-size: 800px 800px;">
                      </div>
                      <a style="display: block;
                 padding-top: 1px;
                 margin-left: 17px;
                 background-position: -314px -449px;
                 background-size: 80px 80px;">
                        <div style="background-image: url(/imgs/1.png);
                              background-position: -422px -545px;
                              background-size: 570px 570px;
                              width: 60px;
                              height: 25px;">
                        </div>
                      </a>
                    </div>
                  </el-col>
                  <el-col :span="12">
                    <div  @mouseover="startFloating4" @mouseout="stopFloating4" style="border: 1px solid #4a4a4a;
              width: 100px;
              height: 100px;  ">
                      <div  alt="Floating Image"
                            class="floating-image4"
                            :class="{ 'floating': isFloating4 }"
                            style="background-image: url(/imgs/1.png);
                      width: 75px;
                      height: 75px;
              background-position: -423px -450px;
              background-size: 800px 800px;">
                      </div>
                      <a style="display: block;
                 padding-top: 1px;
                 margin-left: 17px;
                 background-position: -314px -449px;
                 background-size: 80px 80px;">
                        <div style="background-image: url(/imgs/1.png);
                              background-position: -433px -112px;
                              background-size: 570px 570px;
                              width: 60px;
                              height: 25px;">
                        </div>
                      </a>
                    </div>
                  </el-col>
                  <el-col :span="12">
                    <div  @mouseover="startFloating5" @mouseout="stopFloating5" style="border: 1px solid #4a4a4a;
              width: 100px;
              height: 100px;  ">
                      <div  alt="Floating Image"
                            class="floating-image4"
                            :class="{ 'floating': isFloating5 }"
                            style="background-image: url(/imgs/1.png);
                      width: 75px;
                      height: 75px;
              background-position: -104px -450px;
              background-size: 800px 800px;">
                      </div>
                      <a style="display: block;
                 padding-top: 1px;
                 margin-left: 17px;
                 background-position: -433px -112px;
                 background-size: 80px 80px;">
                        <div style="background-image: url(/imgs/1.png);
                              background-position: -275px -545px;
                              background-size: 570px 570px;
                              width: 60px;
                              height: 25px;">
                        </div>
                      </a>
                    </div>
                  </el-col>
                  <el-col :span="12">
                    <div  @mouseover="startFloating6" @mouseout="stopFloating6" style="border: 1px solid #4a4a4a;
              width: 100px;
              height: 100px;  ">
                      <div  alt="Floating Image"
                            class="floating-image6"
                            :class="{ 'floating': isFloating6 }"
                            style="background-image: url(/imgs/1.png);
                      width: 75px;
                      height: 75px;
              background-position: -206px -450px;
              background-size: 800px 800px;">
                      </div>
                      <a style="display: block;
                 padding-top: 1px;
                 margin-left: 17px;
                 background-position: -207px -450px;
                 background-size: 80px 80px;">
                        <div style="background-image: url(/imgs/1.png);
                              background-position: -200px -545px;
                              background-size: 570px 570px;
                              width: 60px;
                              height: 25px;">
                        </div>
                      </a>
                    </div>
                  </el-col>
                </el-row>
              </div>
            </el-col>
            <el-col :span="16">
              <div style="background-color: #f5f5f5;
          width: 700px;
          height: 306px;
          background-position: 100px 0;">
                <a style="display: block;
                 padding-top: 10px;
                 margin-left: 30px;
                 background-position: -314px -449px;
                 background-size: 80px 80px;"
                   @mouseover="handleMouseOver1" @mouseleave="handleMouseLeave1">
                  <div
                      class="sprite-container"
                      :style="{
        width: '70px',
        height: '70px',
        float: 'left',
        marginRight: '5px',
        background: `url('/imgs/2.png') 0px 0px no-repeat`,
        cursor: 'pointer',
        backgroundPosition: `${spriteX1}px ${spriteY1}px`,
      }">
                  </div>
                </a>
                <a style="display: block;
                 padding-top: 0px;
                 margin-left: 100px;
                 background-position: -314px -449px;
                 background-size: 80px 80px;"
                   @mouseover="handleMouseOver2" @mouseleave="handleMouseLeave2">
                  <div
                      class="sprite-container"
                      :style="{
        width: '70px',
        height: '70px',
        float: 'left',
        marginRight: '5px',
        background: `url('/imgs/2.png') -75px 0px no-repeat`,
        cursor: 'pointer',
        backgroundPosition: `${spriteX2}px ${spriteY2}px`,
      }">
                  </div>
                </a>
                <a style="display: block;
                 padding-top: 0px;
                 margin-left: 100px;
                 background-position: -314px -449px;
                 background-size: 80px 80px;"
                   @mouseover="handleMouseOver3" @mouseleave="handleMouseLeave3">
                  <div
                      class="sprite-container"
                      :style="{
        width: '70px',
        height: '70px',
        float: 'left',
        marginRight: '5px',
        background: `url('/imgs/2.png') -150px 0px no-repeat`,
        cursor: 'pointer',
        backgroundPosition: `${spriteX3}px ${spriteY3}px`,
      }">
                  </div>
                </a>
                <a style="display: block;
                 padding-top: 0px;
                 margin-left: 100px;
                 background-position: -314px -449px;
                 background-size: 80px 80px;"
                   @mouseover="handleMouseOver4" @mouseleave="handleMouseLeave4">
                  <div
                      class="sprite-container"
                      :style="{
        width: '70px',
        height: '70px',
        float: 'left',
        marginRight: '5px',
        background: `url('/imgs/2.png') -225px 0px no-repeat`,
        cursor: 'pointer',
        backgroundPosition: `${spriteX4}px ${spriteY4}px`,
      }">
                  </div>
                </a>
                <a style="display: block;
                 padding-top: 0px;
                 margin-left: 100px;
                 background-position: -314px -449px;
                 background-size: 80px 80px;"
                   @mouseover="handleMouseOver5" @mouseleave="handleMouseLeave5">
                  <div
                      class="sprite-container"
                      :style="{
        width: '70px',
        height: '70px',
        float: 'left',
        marginRight: '5px',
        background: `url('/imgs/2.png') -300px 0px no-repeat`,
        cursor: 'pointer',
        backgroundPosition: `${spriteX5}px ${spriteY5}px`,
      }">
                  </div>
                </a>
                <h4 style="  width: 375px;
            float: left;
             position: absolute;
             top: 85px;
             left: 230px;
             opacity: 1;
             color: #978575;
        "><span>标准版武将</span>
                  <p>三国杀经典武将包，包含魏、蜀、吴、群四方势力，共26名武将。更多武将攻略请点击右上角更多按钮查看武将资料站，或登陆游戏内查看武将详情。</p></h4>
                <div>
                  <img src="imgs/3.png" style="float: left; height:300px; overflow: hidden; position: absolute; top: 0; right: 300px;">
                </div>
              </div>
            </el-col>
            <el-col :span="4">
              <img src="imgs/4.jpg" style="margin-left: -130px;">
            </el-col>
          </el-row>
        </div>





        <div style="width: 1200px; margin: 0 auto ;position: absolute;top: 1200px;left: 275px">
          <el-row :gutter="20">
            <el-col :span="4">
              <el-card style="background-color: #333333">
                <el-card style="background-color: white;width: 180px;height:80px;margin-top: -20px;margin-left: -21px;text-align: center;font-family: 楷体;font-size: 20px">
                  <p style="margin-top: 10px">快捷导航</p>
                </el-card>
                <el-row :gutter="10">
                  <el-col :span="10">
                    <el-icon style="color: #A69280;font-size: 35px;margin-left: 10px;margin-top: 10px" class="i2"><Lock /></el-icon>
                    <p style="color: #A69280; font-size: 13px;text-align: center">密码找回</p>
                    <el-divider border-style="double" style="margin-top: 10px;margin-bottom: 0;background-color: #A69280;width: 180px;margin-left: -19px"/>
                    <el-icon style="color: #A69280;font-size: 35px;margin-left: 10px;margin-top: 10px" class="i2"><CreditCard /></el-icon>
                    <p style="color: #A69280; font-size: 13px;text-align: center">实名认证</p>
                    <el-divider border-style="double" style="margin-top: 10px;margin-bottom: 0;background-color: #A69280;width: 180px;margin-left: -19px"/>
                    <el-icon style="color: #A69280;font-size: 35px;margin-left: 10px;margin-top: 10px" class="i2"><CameraFilled /></el-icon>
                    <p style="color: #A69280; font-size: 13px;text-align: center">家长监控</p>
                    <el-divider border-style="double" style="margin-top: 10px;margin-bottom: 0;background-color: #A69280;width: 180px;margin-left: -19px"/>
                    <el-icon style="color: #A69280;font-size: 35px;margin-left: 10px;margin-top: 10px" class="i2"><MostlyCloudy /></el-icon>
                    <p style="color: #A69280; font-size: 13px;text-align: center">更多游戏</p>
                    <el-divider border-style="double" style="margin-top: 10px;margin-bottom: 0;background-color: #A69280;width: 180px;margin-left: -19px"/>
                  </el-col>
                  <el-col :span="4"><el-divider direction="vertical" style="height: 375px; background-color: #A69280" /></el-col>
                  <el-col :span="10">
                    <el-icon style="color: #A69280;font-size: 35px;margin-left: 10px;margin-top: 10px" class="i2" ><Document /></el-icon>
                    <p style="color: #A69280; font-size: 13px;text-align: center">密码找回</p>
                    <el-icon style="color: #A69280;font-size: 35px;margin-left: 10px;margin-top: 10px" class="i2"><View /></el-icon>
                    <p style="color: #A69280; font-size: 13px;text-align: center">防沉迷</p>
                    <el-icon style="color: #A69280;font-size: 35px;margin-left: 10px;margin-top: 10px" class="i2"><DocumentCopy /></el-icon>
                    <p style="color: #A69280; font-size: 13px;text-align: center">用户协议</p>
                    <el-icon style="color: #A69280;font-size: 35px;margin-left: 10px;margin-top: 10px" class="i2"><Edit /></el-icon>
                    <p style="color: #A69280; font-size: 13px;text-align: center">隐私政策</p>
                  </el-col>
                  <el-col :span="24">
                    <img src="images/img_14.png" alt="3" style="height: 264px;margin-left: 10px">
                  </el-col>
                </el-row>
              </el-card>
            </el-col>
            <el-col :span="20">
              <el-row :gutter="20">
                <el-col :span="8">
                  <el-card style="height: 363px;">
                    <el-menu mode="horizontal" active-text-color="brown">
                      <el-menu-item index="sqzl"><b style="font-size: 15px; color: brown">社区专栏</b>&nbsp;<span
                          style="font-size: 10px; margin-top: 5px; color: gray">COMMUNITY</span></el-menu-item>
                      <el-icon style="margin-left: 160px; margin-top: 20px">
                        <Plus/>
                      </el-icon>
                    </el-menu>
                    <div style=" font-size: 13px">
                      <p class="d1">【引友杀敌，不自出力】——浅谈借刀杀人</p>
                      <p class="d1">【鲱鱼排位专栏】移除胜率收割机，S12回</p>
                      <p class="d1">S12赛季将池分析：旧江山浑是新愁</p>
                      <p class="d1">卡比谈前瞻——李婉</p>
                      <p class="d1">斗地主强将全析——杨芷：人美，但实力</p>
                      <p class="d1">【紫云出品】阿瞒与豕之间不得不说的事--吕伯奢攻略</p>
                    </div>
                    <img src="images/img.png" alt="" style="margin-top: 10px">
                  </el-card>
                </el-col>
                <el-col :span="16">
                  <el-card>
                    <el-menu mode="horizontal" active-text-color="brown">
                      <el-menu-item index="trzq"><b style="font-size: 15px; color: brown">同人专区</b>&nbsp;<span
                          style="font-size: 10px; margin-top: 5px; color: gray">DOUJIN DISTRICT</span></el-menu-item>
                      <el-icon style="margin-left: 397px; margin-top: 20px">
                        <Plus/>
                      </el-icon>
                    </el-menu>
                    <span class="s1">同人COS</span> |
                    <span class="s1">手绘漫画</span> |
                    <span class="s1">玩家风采</span> |
                    <span class="s1">同人小说</span>
                    <el-button type="warning" style="width: 80px;height: 20px;margin-left: 157px">
                      <el-icon>
                        <UploadFilled/>
                      </el-icon>
                      我要投稿
                    </el-button>
                    <el-row :gutter="20">
                      <el-col :span="8" class="i1">
                        <img src="images/img_1.png" alt="1">
                        <p style="position: absolute; top: 81px; left: 8px;font-size: 12px;background-color: rgba(0,0,0,0.6);color: white">
                          &nbsp;&nbsp;郭嘉·天生郭奉孝,豪杰冠群英 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</p>
                      </el-col>
                      <el-col :span="8" class="i1">
                        <img src="images/img_2.png" alt="2">
                        <p style="position: absolute; top: 81px; left: 8px;font-size: 12px;background-color: rgba(0,0,0,0.6);color: white">
                          &nbsp;&nbsp;陆逊·三分自是多英俊,又显江南 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</p>
                      </el-col>
                      <el-col :span="8" class="i1">
                        <img src="images/img_3.png" alt="2">
                        <p style="position: absolute; top: 81px; left: 8px;font-size: 12px;background-color: rgba(0,0,0,0.6);color: white">
                          &nbsp;&nbsp;小乔 · 东吴名将推公瑾，南国佳人说小乔 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</p>
                      </el-col>
                    </el-row>
                    <el-row :gutter="20">
                      <el-col :span="8" class="i1">
                        <img src="images/img_4.png" alt="1">
                        <p style="position: absolute; top: 81px; left: 8px;font-size: 12px;background-color: rgba(0,0,0,0.6);color: white">
                          &nbsp;&nbsp;孙尚香·谁知一女轻天下， 欲易刘郎鼎峙心 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</p>
                      </el-col>
                      <el-col :span="8" class="i1">
                        <img src="images/img_5.png" alt="2">
                        <p style="position: absolute; top: 81px; left: 8px;font-size: 12px;background-color: rgba(0,0,0,0.6);color: white">
                          &nbsp;&nbsp;孙策·却将江左业，分付紫髯郎
                          &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</p>
                      </el-col>
                      <el-col :span="8" class="i1">
                        <img src="images/img_6.png" alt="2">
                        <p style="position: absolute; top: 81px; left: 8px;font-size: 12px;background-color: rgba(0,0,0,0.6);color: white">
                          &nbsp;&nbsp;曹丕 · 一双眼光射寒星，两弯眉浑如刷漆 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</p>
                      </el-col>
                    </el-row>
                  </el-card>
                </el-col>
                <el-col>
                  <el-card>
                    <el-row :gutter="20">
                      <el-menu mode="horizontal" active-text-color="brown">
                        <el-menu-item index="trzq"><b style="font-size: 15px; color: brown">视频中心</b>&nbsp;<span
                            style="font-size: 10px; margin-top: 5px; color: gray">VIDEO CENTER</span></el-menu-item>
                        <el-icon style="margin-left: 754px; margin-top: 20px">
                          <Plus/>
                        </el-icon>
                      </el-menu>
                      <span class="s1">攻略锦集 |</span>
                      <span class="s1">同人创作 |</span>
                      <span class="s1">赛事视频</span>
                      <el-button type="warning" style="width: 80px;height: 20px;margin-left: 596px">
                        <el-icon>
                          <UploadFilled/>
                        </el-icon>
                        我要投稿
                      </el-button>
                      <el-col :span="8">
                        <img src="images/img_7.png" alt="" style="margin-left: -10px;width: 320px;margin-top: 10px">
                      </el-col>
                      <el-col :span="16">
                        <el-row :gutter="20">
                          <el-col :span="8" class="i1">
                            <img src="images/img_8.png" style="width: 203px" alt="1">
                            <p style="position: absolute; top: 81px; left: 8px;font-size: 12px;background-color: rgba(0,0,0,0.6);color: white">
                              &nbsp;&nbsp;循序渐进 一连到终 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</p>
                          </el-col>
                          <el-col :span="8" class="i1">
                            <img src="images/img_9.png" style="width: 203px" alt="2">
                            <p style="position: absolute; top: 81px; left: 8px;font-size: 12px;background-color: rgba(0,0,0,0.6);color: white">
                              &nbsp;&nbsp;一张牌引发的血案 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</p>
                          </el-col>
                          <el-col :span="8" class="i1">
                            <img src="images/img_10.png" style="width: 203px" alt="2">
                            <p style="position: absolute; top: 81px; left: 8px;font-size: 12px;background-color: rgba(0,0,0,0.6);color: white">
                              &nbsp;&nbsp;自书己见 大刷特刷 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</p>
                          </el-col>
                        </el-row>
                        <el-row :gutter="20">
                          <el-col :span="8" class="i1">
                            <img src="images/img_11.png" style="width: 203px" alt="1">
                            <p style="position: absolute; top: 81px; left: 8px;font-size: 12px;background-color: rgba(0,0,0,0.6);color: white">
                              &nbsp;&nbsp;没有忠臣的四月 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</p>
                          </el-col>
                          <el-col :span="8" class="i1">
                            <img src="images/img_12.png" style="width: 203px" alt="2">
                            <p style="position: absolute; top: 81px; left: 8px;font-size: 12px;background-color: rgba(0,0,0,0.6);color: white">
                              &nbsp;&nbsp;第五反贼 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</p>
                          </el-col>
                          <el-col :span="8" class="i1">
                            <img src="images/img_13.png" style="width: 203px" alt="2">
                            <p style="position: absolute; top: 81px; left: 8px;font-size: 12px;background-color: rgba(0,0,0,0.6);color: white">
                              &nbsp;&nbsp;智慧岂能少得了装身份? &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</p>
                          </el-col>
                        </el-row>
                      </el-col>
                    </el-row>
                  </el-card>
                </el-col>
              </el-row>
            </el-col>
          </el-row>
        </div>

        <div style="width: 1200px; margin: 0 auto;margin-top: 794px;margin-left: 251px">
          <el-row :gutter="20">
            <el-col :span="4">
              <img src="/imgs/a1.png" width="100%" height="250px">
            </el-col>
            <el-col :span="3">

              <img class="img1" src="imgs/a2.png" alt="" width="100%" height="250px">

            </el-col>
            <el-col :span="5">

              <el-menu mode="horizontal" :ellipsis="false" active-text-color="brown">
                <el-menu-item index="zxgl"><b style="font-size: 15px; color: brown">最新攻略</b>&nbsp;<span style="font-size: 10px;margin-top: 5px;color: gray">LATEST RAIDERS</span></el-menu-item>
                <el-icon style="margin-left: 10px;margin-top: 20px"><Plus/></el-icon>
              </el-menu>
              <el-input style="margin-top: 10px" placeholder="请输入搜索的关键字">
                <template #append>
                  <el-button :icon="Search"></el-button>
                </template>
              </el-input>
              <div style=" font-size: 10px">
                <p class="d1">【国战对局思路之一】群雄逐鹿，须得刚...</p>
                <p class="d1">【司马徽攻略】荐杰二才明大义，称好三...</p>
                <p class="d1">【新标国战第一弹】只是嘴哥的指纹被猫...</p>
                <p class="d1">【武娘】武娘还是三娘，傻傻分不清—鲍...</p>
                <p class="d1">【神之试炼】秋冬组详解 </p>
                <p class="d1">【举个栗子攻略】镇南の武娘姬丶鲍三娘...</p>
              </div>

            </el-col>
            <el-col :span="3">
              <div @mouseover="handleMouseOver6" @mouseleave="handleMouseLeave6">
                <div class="image-container" style="background: url('/imgs/a3.png') no-repeat;
    width: 100%;
    height: 250px;"></div>
              </div>


            </el-col>
            <el-col :span="3">

              <img class="img1" src="imgs/a4.png" alt="" width="100%" height="250px">

            </el-col>
            <el-col :span="3">
              <div @mouseover="handleMouseOver7" @mouseleave="handleMouseLeave7">
                <div class="image-container1" style="background: url('/imgs/a5.png') no-repeat;
    width: 100%;
    height: 250px;"></div>
              </div>

            </el-col>

            <el-col :span="3">

              <img class="img1" src="imgs/a6.png" alt="" width="100%" height="250px">

            </el-col>
          </el-row>
        </div>











      </el-main>



      <el-footer style="position: relative;top: 250px">
        <el-row :gutter="20">
          <el-col :span="3">
            <img src="bg33.jpg" style="width: 175px; ">
          </el-col>
          <el-col :span="2">
            <img src="jing.png" style="width: 50px; position: absolute;left :225px">
          </el-col>
          <el-col :span="2">
            <img src="business-license.jpg" style="width: 50px;position: absolute;left :295px">
          </el-col>
        </el-row>
        <div style="width: 100%">
          <p style="font-size: 13px">抵制不良游戏|拒绝盗版游戏|注意自我保护|谨防受骗上当|适度游戏益脑|沉迷游戏伤身|合理安排时间|享受健康生活</p>
        </div>
        <div style="width: 100%">
          <p style="font-size: 13px">游戏批准文号 京新出音 [2010] 235号</p>
        </div>
        <div style="width: 100%">
          <p style="font-size: 13px">出版单位 杭州边锋网络技术有限公司</p>
        </div>
        <div style="width: 100%">
          <p style="font-size: 13px">增值电信业务经营许可证号码, [浙B2-20160108] 浙公网安备 33010502005081号 杭州游卡网络技术有限公司　版权所有</p>
        </div>
        <div style="width: 100%">
          <p style="font-size: 13px">杭州市滨江区创业启梦空间, 接待时间：周一至周五 9:30-17:30 适龄提示：12岁以上使用 家长监督</p>
        </div>
        <div>
          <img src="images/age.png" style="position: absolute; top: 0px; right :50px">
        </div>
      </el-footer>
    </el-container>
  </div>
</template>

<script>
import {Search} from '@element-plus/icons-vue'


export default {
  data() {
    return {
      isFloating1: false,
      isFloating2: false,
      isFloating3: false,
      isFloating4: false,
      isFloating5: false,
      isFloating6: false,
      isHovered1: false,
      spriteX1: 0, // 意味着精灵（sprite）的初始 X 轴位置。
      spriteY1: 0, // 意味着精灵（sprite）的初始 Y 轴位置。
      hoverSpriteX1: 0, // 意味着在鼠标悬停时精灵的 X 轴位置。
      hoverSpriteY1: -70, // 意味着在鼠标悬停时精灵的 Y 轴位置。
      isHovered2: false,
      spriteX2: -75, // 意味着精灵（sprite）的初始 X 轴位置。
      spriteY2: 0, // 意味着精灵（sprite）的初始 Y 轴位置。
      hoverSpriteX2: -75, // 意味着在鼠标悬停时精灵的 X 轴位置。
      hoverSpriteY2: -70, // 意味着在鼠标悬停时精灵的 Y 轴位置。
      isHovered3: false,
      spriteX3: -150, // 意味着精灵（sprite）的初始 X 轴位置。
      spriteY3: 0, // 意味着精灵（sprite）的初始 Y 轴位置。
      hoverSpriteX3: -150, // 意味着在鼠标悬停时精灵的 X 轴位置。
      hoverSpriteY3: -70, // 意味着在鼠标悬停时精灵的 Y 轴位置。
      isHovered4: false,
      spriteX4: -225, // 意味着精灵（sprite）的初始 X 轴位置。
      spriteY4: 0, // 意味着精灵（sprite）的初始 Y 轴位置。
      hoverSpriteX4: -225, // 意味着在鼠标悬停时精灵的 X 轴位置。
      hoverSpriteY4: -70, // 意味着在鼠标悬停时精灵的 Y 轴位置。
      isHovered5: false,
      spriteX5: -300, // 意味着精灵（sprite）的初始 X 轴位置。
      spriteY5: 0, // 意味着精灵（sprite）的初始 Y 轴位置。
      hoverSpriteX5: -300, // 意味着在鼠标悬停时精灵的 X 轴位置。
      hoverSpriteY5: -70, // 意味着在鼠标悬停时精灵的 Y 轴位置。
    };

  },
  methods: {
    startFloating1() {
      this.isFloating1 = true;
    },
    stopFloating1() {
      this.isFloating1 = false;
    },startFloating2() {
      this.isFloating2 = true;
    },
    stopFloating2() {
      this.isFloating2 = false;
    },
    startFloating3() {
      this.isFloating3 = true;
    },
    stopFloating3() {
      this.isFloating3 = false;
    },
    startFloating4() {
      this.isFloating4 = true;
    },
    stopFloating4() {
      this.isFloating4 = false;
    },
    startFloating5() {
      this.isFloating5 = true;
    },
    stopFloating5() {
      this.isFloating5 = false;
    },
    startFloating6() {
      this.isFloating6 = true;
    },
    stopFloating6() {
      this.isFloating6 = false;
    },
    handleMouseOver1() {
      this.isHovered1 = true;
      this.spriteX1 = this.hoverSpriteX1;
      this.spriteY1 = this.hoverSpriteY1;
    },
    handleMouseLeave1() {
      this.isHovered1 = false;
      this.spriteX1 = 0; // 意味着将元素的 X 轴位置重置到初始位置。
      this.spriteY1 = 0; // 意味着将元素的 Y 轴位置重置到初始位置。
    },
    handleMouseOver2() {
      this.isHovered2 = true;
      this.spriteX2 = this.hoverSpriteX2;
      this.spriteY2 = this.hoverSpriteY2;
    },
    handleMouseLeave2() {
      this.isHovered2 = false;
      this.spriteX2 = -75; // 意味着将元素的 X 轴位置重置到初始位置。
      this.spriteY2 = 0; // 意味着将元素的 Y 轴位置重置到初始位置。
    },
    handleMouseOver3() {
      this.isHovered3 = true;
      this.spriteX3 = this.hoverSpriteX3;
      this.spriteY3 = this.hoverSpriteY3;
    },
    handleMouseLeave3() {
      this.isHovered3 = false;
      this.spriteX3 = -150; // 意味着将元素的 X 轴位置重置到初始位置。
      this.spriteY3 = 0; // 意味着将元素的 Y 轴位置重置到初始位置。
    },
    handleMouseOver4() {
      this.isHovered4 = true;
      this.spriteX4 = this.hoverSpriteX4;
      this.spriteY4 = this.hoverSpriteY4;
    },
    handleMouseLeave4() {
      this.isHovered4 = false;
      this.spriteX4 = -225; // 意味着将元素的 X 轴位置重置到初始位置。
      this.spriteY4 = 0; // 意味着将元素的 Y 轴位置重置到初始位置。
    },
    handleMouseOver5() {
      this.isHovered5 = true;
      this.spriteX5 = this.hoverSpriteX5;
      this.spriteY5 = this.hoverSpriteY5;
    },
    handleMouseLeave5() {
      this.isHovered5 = false;
      this.spriteX5 = -300; // 意味着将元素的 X 轴位置重置到初始位置。
      this.spriteY5 = 0; // 意味着将元素的 Y 轴位置重置到初始位置。
    },
    handleMouseOver6() {
      document.querySelector('.image-container').classList.add('grayscale', 'animate-up');
    },
    handleMouseLeave6() {
      document.querySelector('.image-container').classList.remove('grayscale', 'animate-up');
    },handleMouseOver7() {
      document.querySelector('.image-container1').classList.add('grayscale', 'animate-up');
    },
    handleMouseLeave7() {
      document.querySelector('.image-container1').classList.remove('grayscale', 'animate-up');
    }
  }
};

</script>
<style scoped>
.p1{
  font-size: 90%;
}
.p1 :hover {
  color: #b3a69a;
}

b{
  font-family: 楷体;
}

.d1 {
  margin: 3px;
}

.d1:hover {
  color: #A69280;
  cursor: pointer;
}

.s1 {
  margin: 10px;
}

.s1:hover {
  color: #A69280;
  cursor: pointer;
}

.i1 {
  margin-top: 10px;
  height: 110px;
  overflow: hidden;
  position: relative;
  cursor: pointer;
  transition: all 0.5s;
}

.i1:hover {
  transition: 0.5s;
  transform: scale(1.05);
}

i1 > p:hover {
  color: #A69280;
}

.i2:hover{
  transform: translate(0,3px);
}
.myGif:hover img
{
  display: none;
}


#oval1 {
  width: 25px;
  height: 15px;
  background-color: #A69280;
  border-radius: 5px/2px;
  text-align: center;
  line-height: 5px;
  color: white;
  font-weight: bold;
  font-size:  10px;
  position: relative;
}
#oval1::after {
  content: "GO";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

#oval2 {
  width: 25px;
  height: 15px;
  background-color: #A69280;
  border-radius: 5px/2px;
  text-align: center;
  color: white;
  font-size:  10px;
  position: relative;
}

#oval2::after {
  content: "GO";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

#oval1:hover {
  transition: 1s;
  cursor:pointer;
  transform:translate(0,-5px);
}
#oval2:hover {
  transition: 1s;
  cursor:pointer;
  transform:translate(0,-5px);
}
.x3:hover{
  transition: 1s;
  cursor:pointer;
  transform:translate(0,-3px);
  color: #B2A191;
}
.x4:hover{
  transition: 1s;
  cursor:pointer;
  transform:translate(0,-3px);
  color: #B2A191;
}
.floating-image1 {
  transition: transform 0.5s ease-in-out;
}
.floating {
  animation: floatAnimation 0.3s infinite alternate; /* 循环播放上下浮动 */
}

@keyframes floatAnimation {
  0% {
    transform: translateY(0);
  }
  100% {
    transform: translateY(-5px); /* 调整上下浮动的距离 */
  }
}
.d1{
  margin-top: 5px;
}
.d1:hover{
  color: #A69280;
  cursor: pointer;
}
.s1{
  margin: 10px;
}
.s1:hover{
  color: #A69280;
  cursor: pointer;
}
.i1{
  margin-top: 10px;
  height: 110px;
  overflow: hidden;
  max-height: 125px;
  position: relative;
  cursor: pointer;
  transition: all 0.5s;
}
.i1:hover{
  transition: 0.5s;
  transform: scale(1.05);
}
i1>p:hover{
  color: #A69280;
}
.img1:hover{
  color:#A69280;
  transition: 0.5s;
  transform: scale(1.05);
}

.image-container {

  transition: background-position 0.3s ease; /* 添加过渡效果 */
}
.image-container1 {

  transition: background-position 0.3s ease; /* 添加过渡效果 */
}

.grayscale {
  filter: grayscale(100%);
}

.animate-up {
  background-position: 0px -100px; /* 设置鼠标悬停时的 background-position */
}


</style>